#include("layout.html")
#@layout()
#define css()
<link href="highlight/styles/railscasts.css" rel="stylesheet">
#end
#define script()
<script src="jquery/jsrender.min.js"></script>
<script src="/static/components/jquery/jquery.form.min.js"></script>
<script src="highlight/highlight.pack.js"></script>
<script>

    hljs.initHighlightingOnLoad();

    $('#commentForm').on('submit', function () {
        $(this).ajaxSubmit({
            type: "post",
            success: function (data) {
                if (data.state == "ok") {
                    doRenderComment(data);
                } else {
                    alert('评论失败：' + data.message);
                    if (data.errorCode == 9) {
                        location.href = '#(CPATH)/user/login';
                    }
                }
                $('#content').val('');
            },
            error: function () {
                alert("网络错误，请稍后重试");
            }
        });
        return false;
    });

    function doRenderComment(data) {
        if (data.code == 0) {
            var tmpl = $.templates("#commentTmpl");
            var html = tmpl.render(data);
            $("#commentForm").after(html);
        } else {
            alert('评论发布成功，管理审核后即可正常显示。')
        }
    }

    $('body').on('click','.toReply', function () {
        $('#pid').val($(this).attr('data-cid'));
        $('#content').val('回复 @' + $(this).attr('data-author') + " ：");
        $('#content').focus();
    });
</script>

<script id="commentTmpl" type="text/x-jsrender">
    <div class="comment-panel">
         <div class="comment-panel-portrait">
            {{if user }}
                <img src="{{:user.avatar}}" class="img-fluid rounded-circle"
                        alt="{{:comment.author}}">
                {{else}}
                <img src="/static/commons/img/avatar.png" class="img-fluid rounded-circle"
                        alt="{{:comment.author}}">
             {{/if}}
        </div>
        <div class="comment-panel-content">
            <div class="comment-panel-content-item">
                <div>{{:comment.author}}</div>
                <div>{{:comment.created}}</div>
            </div>
            <div class="comment-panel-content-main">{{:comment.content}}</div>

        </div>
        <span class="clearfix"></span>
        <div class="text-right text-primary">
            <a href="javascript:;"
                data-cid="{{:comment.id}}"
                data-author="{{:comment.author}}"
                class="toReply">回复</a>
         </div>
    </div>
</script>

#end

#define content()
<div class="container ll-cantainer">
    <div class="ll-artical-content">
        <h2 class="ll-artical-title">#(article.title ??)</h2>
        <div class="ll-card-tag">
            <!--<div class="">-->
                <!--<img src="img/icon-portrait.png" class="img-fluid rounded-circle" alt="Responsive image">-->
                <!--<span class="text-success">#(article.user.nickname ??)</span>-->
            <!--</div>-->
            <div><i class="fa fa-clock-o"></i>#date(article.created)</div>
            <div><i class="fa fa-eye"></i> #(article.view_count ?? 0)</div>
            <div><i class="fa fa-commenting-o"></i> #(article.comment_count ?? 0)</div>
        </div>
        <div class="ll-artical">
            #(article.content ??)
        </div>

        #relevantArticles(article)
        <div class="recommend-panel">
            <h4 class="ll-title">相关文章</h4>
            <div class="card-deck">
                #for(article :relevantArticles )
                <div class="card ll-panel">
                    <a class="recommend-panel-link" href="#(article.url ??)">
                        <div class="recommend-panel-top">
                            <img src="#(article.thumbnail ?? 'img/blog-image.jpg')" class="img-fluid" alt="#(article.title ??)">
                        </div>
                        <div class="recommend-panel-bottom">
                            #(article.title ??)
                        </div>
                    </a>
                </div>
                #end
            </div>
        </div>
        #end

        <div class="comment" id="comments">
            <h4 class="ll-title">发表评论</h4>
            <div class="comment-content">

                <form class="ll-comment-from" id="commentForm" action="#(CPATH)/article/postComment" method="post">
                    <input type="hidden" name="articleId" value="#(article.id)">
                    <input type="hidden" name="pid" id="pid">
                    <div class="comment-write">
                        <span class="ll-comment-from-icon"><i class="fa fa-pencil"></i></span>
                        <textarea placeholder="想说就说吧..." rows="1" name="content" id="content"></textarea>
                    </div>
                    <div class="comment-vcode">
                    #if(option('article_comment_vcode_enable'))
                        <input placeholder="请输入验证码" name="captcha">
                        <img class="vcode-img" src="/commons/captcha" onclick="this.src='#(CPATH)/commons/captcha?d='+Math.random();">
                    #end
                    </div>
                    <button type="submit">发射</button>
                    <span class="clearfix"></span>
                </form>
            </div>


            #commentPage()
            #for(comment : commentPage.list)
            #if(comment.parent)
            <div class="comment-panel">
                <div class="comment-panel-portrait">
                    <img src="#(comment.parent.user.avatar ??)" class="img-fluid rounded-circle"
                         alt="#(comment.parent.author ??)">
                </div>
                <div class="comment-panel-content">
                    <div class="comment-panel-content-item">
                        <div>#(comment.parent.author ??)</div>
                        <div>#date(comment.parent.created)</div>
                    </div>
                    <div class="comment-panel-content-main">#(comment.parent.content ??)</div>
                    <div class="comment-secondary-panel">
                        <div class="comment-panel-portrait">
                            <img src="#(comment.user.avatar ??)" class="img-fluid rounded-circle"
                                 alt="#(comment.author ??)">
                        </div>
                        <div class="comment-panel-content">
                            <div class="comment-panel-content-item">
                                <div>#(comment.author ??)</div>
                                <div>#date(comment.created)</div>
                            </div>
                            <div class="comment-panel-content-main">#(comment.content ??)</div>
                        </div>
                        <span class="clearfix"></span>
                    </div>
                </div>
                <span class="clearfix"></span>
                <div class="text-right text-primary">
                    <a href="javascript:;"
                       data-cid="#(comment.id)"
                       data-author="#(comment.author ??)"
                       class="toReply">回复</a>
                </div>
            </div>
            #else
            <div class="comment-panel">
                <div class="comment-panel-portrait">
                    <img src="#(comment.user.avatar ??)" class="img-fluid rounded-circle"
                         alt="#(comment.author ??)">
                </div>
                <div class="comment-panel-content">
                    <div class="comment-panel-content-item">
                        <div>#(comment.author ??)</div>
                        <div>#date(comment.created)</div>
                    </div>
                    <div class="comment-panel-content-main">#(comment.content ??)</div>
                </div>
                <span class="clearfix"></span>
                <div class="text-right text-primary">
                    <a href="javascript:;"
                       data-cid="#(comment.id)"
                       data-author="#(comment.author ??)"
                       class="toReply">回复</a>
                </div>
            </div>
            #end
            #end


            #commentPaginate(anchor="comments")
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center ">
                    #for(page : pages)
                    <li class="page-item #(page.style ??)">
                        <a class="page-link" href="#(page.url ??)">
                            #(page.text ??)
                        </a>
                    </li>
                    #end
                </ul>
            </nav>
            #end

            #end
        </div>

    </div>
</div>
#end